<template>
    <el-card :padding="0" :body-style="{backgroundColor: color}" class="infor-card-wrap">
        <div class="infor-card-con">
            <el-col class="infor-card-icon-con" :style="{color: 'white'}" :span="8">
                <el-row class="height-100" type="flex" align="middle" justify="center">
                    <i :class="iconType" :style="{fontSize: iconSize + 'px', color: '#ddd'}"></i>
                </el-row>
            </el-col>
            <el-col :span="16" class="height-100">
                <el-row type="flex" align="middle" justify="start" class="height-100" style="padding-left: 20px;">
                    <count-up 
                        class="infor-card-count user-created-count" 
                        :id-name="idName" 
                        :end-val="endVal" 
                        :subUnit="subUnit"
                        :color="fontColor"
                        :countSize="countSize"
                        :countWeight="countWeight">
                        <p class="infor-intro-text" slot="intro" :title="introText" :style="{color:fontColor}">{{ introText }}</p>
                    </count-up>
                </el-row>
            </el-col>
        </div>
    </el-card>
</template>

<script>
import countUp from './countUp.vue';

export default {
    name: 'infoCard', // 信息卡片组件
    components: {
        countUp
    },
    props: {
        idName: String,
        endVal: [Number, String],
        color: String,
        iconType: String,
        introText: String,
        subUnit: String,
        iconSize: {
            type: String,
            default: '40'
        },
        fontColor: {
            type: String,
            default: '#ffffff'
        },
        countSize: {
            type: String,
            default: '30px'
        },
        countWeight: {
            type: Number,
            default: 700
        },
    }
};
</script>

<style lang="scss" scoped>
.infor-card-icon-con{
    height: 100%;
}
.height-100{
    height: 100%;
}
.infor-card-count{
    width: 100%;
    p{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.infor-card-con{
    height: 83px;
}
.infor-intro-text{
    font-size:14px;
    font-weight:500;
    color:#ffffff;
}
.infor-card-wrap{
    /deep/ {
        .el-card__body{
            padding: 10px;
        }
    }
}
</style>

